<template>
  <div id="app" style="overflow: hidden;">
    <div>
      <div class="header" style="z-index: 102">
        <my-header title="视频详情" title-color="white" headerBg="black">
          <img slot="left" src="../../assets/back.png" style="margin-top: 0;width: 0.5rem;height: 0.5rem" @click="goback()">
        </my-header>
      </div>
      <div class="videoList" v-if="videoList?(videoList.length):'0'" style="margin-top: 1.1rem">
        <div v-for="item in videoList">
          <img :src="item.vpicPath" alt="" style="width: 100%;max-height: 9rem">
          <video src="http://admin.weixin.ihk.cn/ihkwx_upload/test.mp4" controls="controls"  height="7*rem"  width="7.5*rem" preload="metadata">
            <!--<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">-->
          </video>
        </div>
      </div>
      <div v-else style="margin-top: 1.1rem">
        没视频啊
      </div>
    </div>
  </div>
</template>
<script>
  import header from 'common/vue/Header.vue'
  import myVideo from 'vue-video'
  import API from '../../../config/api/API'
  var api = new API();

  export default {
    data() {
      return {
        dataList: [],
        videoList: null,
        video: {
          sources: [{
            src: 'http://admin.weixin.ihk.cn/ihkwx_upload/test.mp4',type:'video/mp4',
            type: 'video/mp4'
          }],
          options: {
            autoplay: true,
            volume: 0.6,
            poster: 'http://covteam.u.qiniudn.com/poster.png'
          }
        }
      }
    },
    components: {
      'my-header': header,
      'my-video': myVideo,
    },
    created () {
      this.getArtistVideoData()
    },
    mounted () {

    },
    watch: {

    },
    methods: {
      getArtistVideoData() {
        var that = this
        api.getList("app/video/getVideoByAId",{
          "tokenContent":window.localStorage['token'],
          "aId":api.getQueryString("artistId"),
          "pageNum":"1",
          "pageSize":"3",
          "status":"0"
        }).then(function (res) {
          console.log(res.data)
          that.videoList = res.data.pageInfo.list
        })
      },
      goback(){
        window.history.back()
      },
    }
  }

</script>
<style lang="less" rel="stylesheet/less" scoped>
  @import '../../css/artistDetail/videoShow.less';
  html,body{
    background-color: #f3f3f3!important;
  }
</style>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
  }
</style>
